<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>	
		
		html,body{
			height: 100%;
		}
		body{
			margin: 0;
		}
		main{
			width: 400px;
			height: 500px;
			margin: 0 auto;
			border: 10px solid gray;
			border-right-width: 15px;
			border-bottom-width: 18px;
		}
		li{
			display: inline-block;
			list-style: none;
			width: 100px;
			height: 100px;
			float: left;
		}
		li>img{
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			border: 2px solid white;
			border-radius: 10px;			
		}
		li:nth-child(1){
			width: 300px;
			height: 300px;
		}
		</style>
	</head>
	<body>
		<main>
		<li><img src="img/big_1.jpg" alt="" class="big"></li>
		<li><img src="img/small_1.jpg" alt=""></li>
		<li><img src="img/small_2.jpg" alt=""></li>
		<li><img src="img/small_3.jpg" alt=""></li>
		<li><img src="img/small_4.jpg" alt=""></li>
		<li><img src="img/small_5.jpg" alt=""></li>
		<li><img src="img/small_6.jpg" alt=""></li>
		<li><img src="img/small_7.jpg" alt=""></li>
		<li><img src="img/small_8.jpg" alt=""></li>
		<li><img src="img/small_9.jpg" alt=""></li>
		<li><img src="img/small_10.jpg" alt=""></li>
		<li><img src="img/small_11.jpg" alt=""></li>
		</main>
	</body>
</html>
<script>
	var big=document.querySelector('.big');
	var imgs = document.querySelectorAll('img');
	var lis = document.querySelectorAll('li');
	for(var i=0;i<lis.length;i++){
		lis[i].index=i;
		lis[i].onmouseover= function(){
			var src=imgs[this.index].src;
			var start=src.indexOf('_');
			var end = src.indexOf('.');
			var srcs=src.substring(start+1,end);
			// console.log('srcs:'+srcs);
			// console.log(start);
			// console.log(end);
			// console.log(src); 
			big.src="img/big_"+srcs+".jpg";
		}
	}
</script>
